@extends('admin.main')

@section('content')
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="ibox-title">
            <h5>链接列表</h5>
        </div>
        <div class="ibox-content">
            <div class="m-b">
                <a href="{{url('admin/link/add')}}" class="btn btn-w-m btn-warning m-r-xs"><i class="fa fa-plus"></i> 添加链接</a>
                <a href="javascript:;" id="btnDel" class="btn btn-danger"><i class="fa fa-trash"></i> 删除</a>
            </div>
            <div class="table-responsive">
                <table id="tblDataList" class="table table-striped">
                    <thead>
                        <tr>
                            <th width="50" class="text-center"><input type="checkbox" id="checkAll" title="全选" /></th>
                            <th>名称</th>
                            <th>链接</th>
                            <th>标签</th>
                            <th>图片</th>
                            <th width="100"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($links as $row)
                        <tr data-id="{{$row->id}}">
                            <td class="text-center">
                                <input type="checkbox" name="ids" value="{{$row->id}}" />
                            </td>
                            <td>{{$row->name}}</td>
                            <td><a href="{{$row->url}}" target="_blank">{{$row->url}}</a></td>
                            <td>
                                @foreach ($row->tags as $tag)
                                <label class="label">{{$tag->tag}}</label>
                                @endforeach
                            </td>
                            <td>
                                <a href="javascript:;" class="m-r-xs js-pic1" data-src="{{$row->pic1 ? asset($row->pic1) : ''}}" title="图片上传">
                                    @if(empty($row->pic1))
                                    <i class="fa fa-cloud-upload fa-lg"></i>
                                    @else
                                    <i class="fa fa-file-image-o fa-lg"></i>
                                    @endif
                                </a>
                            </td>
                            <td>
                                <a href="{{url('admin/link/edit/'.$row->id)}}" class="m-r-xs">
                                    <i class="fa fa-pencil-square fa-lg"></i> 编辑
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="text-center"><?php echo $links->render(); ?></div>
            </div>
        </div>
    </div>
</div>

<script id="tplUploadPic1" type="text/html">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">&times;</button>
                <h4 class="modal-title">图片上传</h4>
            </div>
            <div class="modal-body">
                <form id="formUppic1" method="post" enctype="multipart/form-data" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">选择图片</label>
                        <div class="col-sm-5">
                            <input name="pic1" type="file" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">缩略图</label>
                        <div class="col-sm-3">
                            <div class="input-group">
                                <div class="input-group-addon">宽</div>
                                <input type="text" name="thumb_width" value="200" class="form-control" onkeyup="value=value.replace(/[^\d]/g,'');" />
                                <div class="input-group-addon">px</div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="input-group">
                                <div class="input-group-addon">高</div>
                                <input type="text" name="thumb_height" value="200" class="form-control" onkeyup="value=value.replace(/[^\d]/g,'');" />
                                <div class="input-group-addon">px</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-10 col-sm-offset-2">
                            <input type="hidden" name="id"  value="@{{id}}">
                            <button class="btn btn-primary btn-w-m" type="submit"><i class="fa fa-cloud-upload fa-lg"></i> 上传图片</button>
                            <button id="btnDeletePic1" data-id="@{{id}}" class="btn btn-danger m-l" type="button"><i class="fa fa-times fa-lg"></i> 删除图片</button>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">预览</label>
                        <div id="pictureViewer" class="col-sm-10">
                        @{{if src}}
                        <img src="@{{src}}" class="img-thumbnail" />
                        @{{else}}
                        <img src="/assets/images/blank.gif" class="img-thumbnail" />
                        @{{/if}}
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</script>
@endsection

@section('pagescript')
<script>
    $("#side-menu li[rel='link']").addClass("active")
        .parents("ul").addClass("in").parents("li").addClass("active");

    seajs.use('models/linkModel', function(linkModel) {
        $('#checkAll').on("click", function(){
            var checked = $(this).prop("checked");
            $("#tblDataList tr[data-id] :checkbox").each(function(){
                $(this).prop("checked", checked);
            });
        }).tooltip({placement: 'right'});

        $("#tblDataList").on('click', '.js-pic1', function(){
            var data = {
                'id': $(this).parents('tr').eq(0).data("id"),
                'src': $(this).data("src")
            };
            $("#modalDialog").html(template("tplUploadPic1", data)).modal('show');
        });

        $("#modalDialog").on('submit', "#formUppic1", function(){
            var id = this.id.value,
                file = this.pic1.value;
            if (file == ""){
                alert("请选择上传文件！");
                return false;
            }
            if (file.lastIndexOf(".") == -1){
                alert("文件类型不正确！");
                return false;
            }
            var ext = file.substr(file.lastIndexOf(".") + 1).toLowerCase();
            if (ext != 'jpg' && ext != 'jpeg' && ext != 'gif' && ext != 'png'){
                alert('图片必须是 JPG、JPEG、GIF 或者 PNG 格式！');
                return false;
            }
            if ( ! /^[1-9]\d{0,3}$/.exec(this.thumb_width.value)){
                alert("宽度只能使用1-4位数字！");
                this.thumb_width.focus();
                return false;
            }
            if ( ! /^[1-9]\d{0,3}$/.exec(this.thumb_height.value)){
                alert("高度只能使用1-4位数字！");
                this.thumb_height.focus();
                return false;
            }
            var data = new FormData();
            data.append('id', this.id.value);
            data.append('pic1', this.pic1.files[0]);
            data.append('width', this.thumb_width.value);
            data.append('height', this.thumb_height.value);
            linkModel.uploadPic1(data, function(result){
                $("#pictureViewer img").eq(0).attr("src", result);
                var tr = $("#tblDataList").find("tr[data-id='"+ id +"']").eq(0),
                    ta = tr.find(".js-pic1").eq(0);
                    ta.data("src", result);
                ta.find("i").removeClass("fa-cloud-upload").addClass("fa-file-image-o");
            }, failure);
            return false;
        });

        $("#btnDel").on('click', function(){
            var keys = new Array();
            $("input[name='ids']").each(function(){
                if(this.checked){
                    keys.push($(this).val());
                }
            });
            var keyValue = keys.join("|");
            if(keyValue){
                layer.confirm('即将删除所选择的 <b>'+ keys.length +'</b> 条记录，且该操作不能恢复！是否继续？', {icon:3}, function(index){
                    linkModel.delete({"ids":keyValue}, function(data){
                        $("tr[data-id]").each(function(){
                            if($(this).find("input[name='ids']").prop("checked")){
                                $(this).remove();
                            }
                        });
                        $("#checkAll").prop("checked", false);
                        layer.close(index);
                    }, failure);
                });
            }else{
                failure('请先选择准备删除的记录！');
            }
        });

        $("#modalDialog").on("click", "#btnDeletePic1", function(){
            if(confirm("确定要删除此图片吗？")){
                var id = $(this).data("id");
                linkModel.deletePic1({"id":id}, function(data){
                    $("#pictureViewer img").eq(0).attr("src", "/assets/images/blank.gif");
                    var tr = $("#tblDataList").find("tr[data-id='"+ id +"']").eq(0),
                        ta = tr.find(".js-pic1").eq(0);
                        ta.data("src", "");
                    ta.find("i").removeClass("fa-file-image-o").addClass("fa-cloud-upload");
                }, failure);
            }
        });
    });
</script>
@endsection